<template>
  <el-card>
    <el-container style="padding: 20px">
      <el-header>
        <h2>成绩分析</h2>
      </el-header>

      <el-main>
        <!-- 筛选区域 -->
        <el-card class="filter-section" shadow="hover">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-select v-model="selectedClass" placeholder="选择班级" style="width: 100%">
                <el-option v-for="classItem in classes" :key="classItem" :label="classItem" :value="classItem" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="selectedExam" placeholder="选择考试" style="width: 100%">
                <el-option v-for="exam in exams" :key="exam" :label="exam" :value="exam" />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="fetchData">搜索</el-button>
            </el-col>
          </el-row>
        </el-card>

        <!-- 成绩分布图 -->
        <el-card class="chart-section" shadow="hover" style="margin-top: 20px">
          <h3 style="display: flex; justify-content: center; align-items: center;">{{ chartTitle }}</h3>
          <div id="chart" ref="chart" style="height: 400px;"></div>
        </el-card>

        <!-- 答题统计 -->
        <el-card class="statistics-section" shadow="hover" style="margin-top: 20px">
          <h3>进阶题答题统计</h3>
          <div v-for="(stat, index) in statistics" :key="index" class="stat-item">
            <p>【单选题】（5分）{{ stat.question }}</p>
            <ol>
              <li v-for="(option, optIndex) in stat.options" :key="optIndex">{{ option }}</li>
            </ol>
            <p>
              <el-tag type="success">答对：{{ stat.correctCount }}人</el-tag>
              <el-tag type="danger">答错：{{ stat.incorrectCount }}人</el-tag>
            </p>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-card>
</template>


<script>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";

export default {
  setup() {
    const selectedClass = ref("");
    const selectedExam = ref("");
    const classes = ref(["网信01班", "网信02班", "网信03班"]);
    const exams = ref(["2017级第一次月考", "2017级第二次月考"]);
    const chartTitle = ref("网信01班2017级第一次月考成绩分析");
    const statistics = ref([
      {
        question: "在计算机领域，信息是会转换为计算机能够处理的____。",
        options: ["A. 数据", "B. 符号", "C. 图形", "D. 数字"],
        correctCount: 25,
        incorrectCount: 25,
      },
      {
        question: "以下哪一项是一个数据存储结构？",
        options: ["A. 数组", "B. 文件", "C. 链表", "D. 栈"],
        correctCount: 15,
        incorrectCount: 35,
      },
    ]);

    // 图表相关
    const chart = ref(null);

    const fetchData = () => {
      console.log("筛选条件：", selectedClass.value, selectedExam.value);
      renderChart();
    };

    const renderChart = () => {
      const myChart = echarts.init(chart.value);
      const option = {
        title: {
          text: "成绩分布图",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["60分", "70分", "80分", "90分", "100分"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: [15, 20, 35, 30, 25],
            itemStyle: {
              color: "#67C23A",
            },
          },
        ],
      };
      myChart.setOption(option);
    };

    onMounted(() => {
      renderChart();
    });

    return {
      selectedClass,
      selectedExam,
      classes,
      exams,
      chartTitle,
      statistics,
      chart,
      fetchData,
    };
  },
};
</script>

<style scoped>
.filter-section {
  margin-bottom: 20px;
}
.filter-section h3 {
  margin-bottom: 10px;
}
.chart-section {
  padding: 20px;
}
.stat-item {
  margin-bottom: 20px;
}
</style>
